import { createRouter, createWebHashHistory } from 'vue-router'

const Layout = () =>
    import ('@/views/Layout')
const Home = () =>
    import ('@/views/home/index')

import TopCategory from '@/views/category'
import SubCategory from '@/views/category/sub'
import Goods from '@/views/goods'
import Login from '@/views/login/index'
import LoginCallback from '@/views/login/callback.vue'
import Cart from '@/views/cart/index'
//路由规则
const routes = [
        //一级路由布局容器
        {
            path: '/',
            component: Layout,
            children: [{
                    path: '/',
                    component: Home
                },
                { path: '/category/:id', component: TopCategory },
                { path: '/category/sub/:id', component: SubCategory },
                { path: '/product/:id', component: Goods },
                { path: '/cart', component: Cart }
            ]
        },
        { path: '/login', component: Login },
        { path: '/login/callback', component: LoginCallback }
    ]
    // 创建一个路由实例
const router = createRouter({
    // 使用hash方式实现路由
    history: createWebHashHistory(),
    // 配置路由规则
    routes,
    //每次切换路由的时候滚动到页面的顶部
    scrollBehavior() {
        //vue 2.0 是通过x，y控制的
        //vue 3.0 是通过left，top控制的
        return { left: 0, top: 0 }
    }
})

export default router